import { ComponentPropsWithoutRef } from "react";
import { IconType } from "react-icons";

type ButtonProps = {
  icon?: IconType
  variant?: 'default' | 'outline' | 'text'
} & ComponentPropsWithoutRef<'button'>

export default function Button({
  children,
  className = '',
  icon: Icon,
  variant = 'default',
  ...props
}: ButtonProps) {
  return <button className={`inline-flex items-center min-x-[38px] min-h-[38px] border-gray-600 rounded px-3 py-1.5 
  ${variant === 'default'
      ? 'text-black dark:text-gray-300 bg-gray-50 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-900'
      : variant === 'outline'
        ? 'border boder-gray-300 dark:border-gray-600 text-white dark:text-gary-300 bg-gray-100 hover:bg-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white'
        : ' text-white hover:bg-gray-700 dark:hover:bg-gray-700'
    }
  ${className}`}
    {...props}
  >
    {Icon && <Icon className={`text-lg ${children ? 'mr-1' : ''}`} ></Icon>}
    {children}
  </button>
} 